<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>货位管理</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: left;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            /*text-align: center;*/
            line-height: 500px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            /*text-align: center;*/
            line-height: 500px;
            padding: 0px;
        }

        body > .el-container {
            margin-bottom: 20px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-button type="primary">新建货物</el-button>
        </el-header>

        <el-container>
            <el-aside>

                <el-tree
                        :data="tWares"
                        :props="defaultProps"
                        node-key="id"
                        ref="tree"
                        @node-click="getTWare">
                </el-tree>

            </el-aside>

            <el-main>
                <el-table
                        ref="roleTable"
                        :data="tableData"
                        @current-change="changeCurrent"
                        @select-all="selectAll"
                        style="width: 100%;">
                    <el-table-column label="序号">
                        <template slot-scope="scope">
                            <span >{{scope.row.id}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="货位编号">
                        <template slot-scope="scope">
                            <span >{{scope.row.cargoNo}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="所属货架编号">
                        <template slot-scope="scope">
                            <span >{{scope.row.shelvesNo}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="所属货区名">
                        <template slot-scope="scope">
                            <span >{{scope.row.tcargoAreas.goodsName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="所属仓库">
                        <template slot-scope="scope">
                            <span >{{scope.row.shelvesNo}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="负责人">
                        <template slot-scope="scope">
                            <span >{{scope.row.id}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="roleEdit(scope.row)">改变状态</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="roleModify(scope.row)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--分页插件-->
                <el-pagination
                        background
                        layout="prev, pager, next"
                        @current-change="loadPage"
                        :total="total"
                        :current-page="current"
                        :page-size="pageSize">
                </el-pagination>

            </el-main>
        </el-container>
    </el-container>


</div>
</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                tWares: {
                },
                defaultProps: {
                    children: 'child',
                    label: 'name',
                },
                tableData:null,
                total:null,
                current:1,
                pageSize:10,
            };
        },
        mounted(){
            this.loadPage(1,10)
            axios.get("/wares")
                .then(value => {
                    //console.log(value.data)
                    this.tWares=value.data;
                })
        },
        methods: {
            loadPage(current,pageSize){
                this.current=current
                this.pageSize=pageSize
                axios.get("/cargoes?current="+this.current+"&pageSize="+this.pageSize)
                    .then(value => {
                        console.log(value.data.data)
                        this.tableData=value.data.data.records;
                        this.total=value.data.data.total
                        this.current=value.data.data.current
                        this.pageSize=value.data.data.pageSize
                    })
            },
            getTWare(data){
                //console.log(data.name)
                //console.log(data)
            },


        }
    });
</script>
</html>